


<template>
  <div>
    <login-header headerTitle="注册bilibili">
      <div slot="right" @click="$router.push('/login')">切换到登录页</div>
    </login-header>

    <login-input
      label="姓名"
      style="margin: 4.167vw 0px"
      rule="^.{6,16}$"
      @inputChange="(res) => (name = res)"
    ></login-input>
    <login-input
      label="账号"
      rule="^.{6,16}$"
      @inputChange="(res) => (uname = res)"
    ></login-input>
    <login-input
      label="密码"
      type="password"
      rule="^.{6,16}$"
      @inputChange="(res) => (pwd = res)"
    ></login-input>
    <login-btn font="注册" @click.native="registClick"></login-btn>
  </div>
</template>

<script>
import LoginInput from "../components/common/LoginInput.vue";
import LoginHeader from "../components/common/LoginHeader";
import LoginBtn from "../components/common/LoginBtn";
import { regist } from "@/utils/Api.js";

export default {
  data() {
    return {
      name: "",
      uname: "",
      pwd: "",
    };
  },
  components: {
    LoginInput,
    LoginHeader,
    LoginBtn,
  },
  methods: {
    async registClick() {
      if (this.name != "" && this.uname != "" && this.pwd != "") {
        if (
          this.name != "error" &&
          this.uname != "error" &&
          this.pwd != "error"
        ) {
          await regist("/register", {
            name: this.name,
            username: this.uname,
            password: this.pwd,
          }).then((res) => {
            console.log(res);
            if (res.data.code != "200") {
              this.$toast.fail(res.data.msg);
            } else {
              this.$toast.success(res.data.msg);
              //登录成功-------------------------------
              localStorage.setItem(
                "user",
                JSON.stringify({
                  id: res.data.id,
                  token: res.data.objtoken,
                })
              );
              setTimeout(() => {
                this.$router.push("./userinfo");
              }, 1000);
            }
          });
        } else {
          this.$toast.fail("格式不正确");
        }
      } else {
        this.$toast.fail("未输入内容");
      }
    },
  },
};
</script>

<style lang="less" scoped></style>
